<template>
	<div class="footer">
		<van-tabbar v-model="active"  active-color="#1BAEAE">
		  <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
		  <van-tabbar-item icon="search" to="/classify">
			  <span>分类</span>
			  <template #icon="props">
			      <i class="icon iconfont icon-fenlei"></i>
			  </template>
		  </van-tabbar-item>
		  <van-tabbar-item icon="cart-o" :badge="listcount" to="/cart">购物车</van-tabbar-item>
		  <van-tabbar-item icon="user-o" to="/my">我的</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	import {mapGetters,mapState} from "vuex";
	export default{
		name:"Footer",
		data(){
			return{
				active:0
			}
		},
		created(){
			if(this.list==null){
				this.$store.dispatch("asyncgetCartList")
			}
		},
		computed:{
			...mapState(["list"]),
			...mapGetters(["listcount"])
		}
	}
</script>

<style scoped lang="less">
	@import "../assets/icon.less";
	.icon-fenlei{
		font-size:21px;
	}
</style>
